<template>
  <view style="padding: 20rpx 32rpx;">
    <view class="top" style="display: flex;justify-content: space-between;align-items: center;">
      <view class="left" style="color: #0A0A09;font-weight: bold;font-size: 32rpx;">{{ list[0].activity.richtext_title }}</view>
      <!-- <view class="left" style="color: #0A0A09;font-weight: bold;font-size: 32rpx;" v-else-if="data == 2">精品大牌，限时满减</view> -->
      <!-- <view class="left" style="color: #0A0A09;font-weight: bold;font-size: 32rpx;" v-else>优选团购</view> -->
      <view class="right" v-if="list.length" style="color: #ADADAA;font-size: 24rpx;">
        {{ $u.timeFormat(list[0].activity.starttime, 'mm月dd日') }}至{{ $u.timeFormat(list[0].activity.endtime, 'mm月dd日') }}
      </view>
    </view>
    <!-- /下面的商品 -->
    <view class="shoop">
      <view class="shoop_son" v-for="(item, index) in list" @click="toDetlis(item)" :key="index">
        <view class="" style="position: relative;">
          <view class="biaoqian">拼团</view>
          <image :src="item.image" style="width: 330rpx;height: 400rpx;" mode=""></image>
        </view>
        <view class="price">
          <view class="bt">{{ item.title }}</view>
          <view class="btPrice">
            <view class="" style="color: #5C5A55;font-size: 28rpx;">￥{{ item.price }}</view>
            <view class="" style="color: #ADADAA;font-size: 24rpx;font-weight: 400;text-decoration: line-through;">￥{{ item.original_price }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!list.length" style="color: #ADADAA;font-size: 32rpx;font-weight: bold;" class=""><view class="" style="text-align: center;margin-top: 50%;">暂无活动</view></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: '1',
      page: 1,
      list: []
    };
  },
  onLoad(options) {
    this.data = options.data;
  },
  onShareAppMessage(res) {},
  onShow() {
    this.init();
  },
  onReachBottom() {
    if (this.list.length < this.page * 10) return;
    this.page++;
    this.init();
  },
  methods: {
    toDetlis(item) {
      uni.navigateTo({
        url: '/pages/details/details?id=' + item.id
      });
    },
    async init() {
      let m = await this.$api.grouponList({ page: this.page });
      // this.list = n.data.data;
      if (this.page != 1) {
        this.list = [...this.list, ...m.data.data];
      } else {
        this.list = m.data.data;
      }
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.shoop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 34rpx;
  .shoop_son {
    width: 330rpx;
    margin-bottom: 32rpx;
    .biaoqian {
      position: absolute;
      bottom: 0;
      width: 330rpx;
      left: 0;
      background-color: #fcf6e3;
      height: 70rpx;
      z-index: 9999999;
      text-align: center;
      line-height: 70rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #8a7229;
    }
    .price {
      text-align: center;
      .bt {
        margin-top: 16rpx;
        margin-bottom: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0a0a09;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      .btPrice {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #5c5a55;
        line-height: 48rpx;
      }
    }
  }
}
</style>
